<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>Beehive</title>
    <!-- webkit内核，默认用急速核-->
    <meta name="renderer" content="webkit">
    <!-- IE使用最高模式渲染，强制IE使用chrome frame渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script th:src="@{/js/jquery-3.4.0.js}"></script>
    <script th:src="@{/js/vue.js}"></script>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body>

<div class="layui-fluid">
    <!-- 面包屑导航 -->
    <span class="layui-breadcrumb">
        <blockquote class="layui-elem-quote">
            <a th:href="@{/admin}" target="_parent">首页</a>
            <a href="#" target="_self">图书管理</a>
            <a><cite>多本上传</cite></a>
        </blockquote>
    </span>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>上传多本电子书</legend>
    </fieldset>

    <div class="layui-upload">
        <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
        <button type="button" class="layui-btn" id="uploadBtn">开始上传</button>
        <div class="layui-upload-list">
            <table class="layui-table">
                <thead>
                <tr>
                    <th>文件名</th>
                    <th>大小</th>
                    <th>状态</th>
                    <th id="tag">操作</th>
                </tr>
                </thead>
                <tbody id="uploadList"></tbody>
            </table>
        </div>
    </div>
</div>

<script th:src="@{/layui/layui.js}" charset="utf-8"></script>

<script>

    layui.use("element", function () {
        var element = layui.element;
        var $ = layui.jquery;
        layui.element.init();

        layui.use('upload', function () {
            var upload = layui.upload;
            //多文件列表示例
            var uploadListView = $('#uploadList')
                , uploadListIns = upload.render({
                elem: '#testList'
                , url: '/book/multi/upload' //改成您自己的上传接口
                , accept: 'file'
                , multiple: true
                , size: 307200 // 单个文件最大300MB
                , auto: false
                , exts: 'pdf'   // 只允许上传pdf格式的电子书
                , bindAction: '#uploadBtn' // 指向一个按钮触发上传，一般配合 auto: false 来使用。值为选择器或DOM对象，如：bindAction: '#btn'
                ,allDone: function(obj){ //当文件全部被提交后，才触发
                    layer.open({
                        title: '提示', icon: 1, time: 3000, shadeClose: true
                        , content: '上传总文件数：' + obj.total + "<br>请求成功的文件数：" + obj.successful +
                            "<br>请求失败的文件数：" + obj.aborted
                    });
                }
                , choose: function (obj) {
                    var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                    //读取本地文件
                    obj.preview(function (index, file, result) {
                        var tr = $(['<tr id="upload-' + index + '">'
                            , '<td>' + file.name + '</td>'
                            , '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>'
                            , '<td>等待上传</td>'
                            , '<td>'
                            , '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                            , '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                            , '</td>'
                            , '</tr>'].join(''));

                        //单个重传
                        tr.find('.demo-reload').on('click', function () {
                            obj.upload(index, file);
                        });

                        //删除
                        tr.find('.demo-delete').on('click', function () {
                            delete files[index]; //删除对应的文件
                            tr.remove();
                            uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                        });

                        uploadListView.append(tr);
                    });
                }
                , done: function (res, index, upload) {
                    if (res.code === 0) { //上传成功
                        var tr = uploadListView.find('tr#upload-' + index)
                            , tds = tr.children();
                        tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                        $('#tag').html("保存路径");
                        tds.eq(3).html('<span style="color: #5FB878;">' + res.dir + '</span>'); // 上传成功则显示保存路径
                        return delete this.files[index]; //删除文件队列已经上传成功的文件
                    }
                    this.error(index, upload);
                }
                , error: function (index, upload) {
                    var tr = uploadListView.find('tr#upload-' + index)
                        , tds = tr.children();
                    tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                    tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                }
            });
        });

    });

</script>

</body>
</html>
